<script setup>
import { Search, Refresh, Download, ArrowUp, ArrowDown } from '@element-plus/icons-vue';
import { useExhibitionHeaderStore } from '../../store/exhibition/exhibitionHeaderStore';
import { useExhibitionStore } from '../../store/exhibition/exhibitionStore';
import { useAddExhibitionStore } from '../../store/exhibition/addExhibitionStore';

// 使用pinia store
const exhibitionHeaderStore = useExhibitionHeaderStore();
const exhibitionStore = useExhibitionStore();
const addExhibitionStore = useAddExhibitionStore();

// 定义事件
const emit = defineEmits(['search']);

// 搜索方法封装，调用store的方法并发出事件
const handleSearch = () => {
  const params = exhibitionHeaderStore.handleSearch();
  // 调用展览store的获取数据方法
  exhibitionStore.getExhibitionList(
    exhibitionStore.pageNum,
    exhibitionStore.pageSize,
    params.name,
    params.type,
    params.status,
    [params.startDate, params.endDate]
  );
  // 发出事件
  emit('search', params);
};

// 重置表单封装
const resetForm = () => {
  const params = exhibitionHeaderStore.resetForm();
  // 调用展览store的获取数据方法
  exhibitionStore.getExhibitionList(
    exhibitionStore.pageNum,
    exhibitionStore.pageSize,
    params.name,
    params.type,
    params.status,
    [params.startDate, params.endDate]
  );
};
</script>

<template>
  <div class="exhibition-header">
    <div class="header-controls">
      <el-tooltip :content="exhibitionHeaderStore.isSearchVisible ? '隐藏搜索区' : '显示搜索区'" placement="top" effect="light">
        <el-button type="primary" class="toggle-search-btn" @click="exhibitionHeaderStore.toggleSearchArea">
          <el-icon>
            <component :is="exhibitionHeaderStore.isSearchVisible ? ArrowUp : ArrowDown" />
          </el-icon>
        </el-button>
      </el-tooltip>
    </div>

    <div class="search-container" v-show="exhibitionHeaderStore.isSearchVisible">
      <el-form :model="exhibitionHeaderStore.searchForm" class="search-form" inline>
        <!-- 展览名称搜索 -->
        <el-form-item label="展览名称">
          <el-input v-model="exhibitionHeaderStore.searchForm.exhibitionName" placeholder="请输入展览名称" clearable
            @keyup.enter="handleSearch">
            <template #prefix>
              <el-icon>
                <Search />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!-- 展览时间范围 -->
        <el-form-item label="展览时间">
          <el-date-picker v-model="exhibitionHeaderStore.searchForm.dateRange" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :shortcuts="[
              { text: '最近一周', value: [new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), new Date()] },
              { text: '最近一个月', value: [new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), new Date()] },
              { text: '最近三个月', value: [new Date(Date.now() - 90 * 24 * 60 * 60 * 1000), new Date()] }
            ]" />
        </el-form-item>

        <!-- 展览类型 -->
        <el-form-item label="展览类型">
          <el-select v-model="exhibitionHeaderStore.searchForm.exhibitionType" placeholder="请选择展览类型" clearable>
            <el-option v-for="item in exhibitionHeaderStore.exhibitionTypes" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>

        <!-- 展览状态 -->
        <el-form-item label="展览状态">
          <el-select v-model="exhibitionHeaderStore.searchForm.exhibitionStatus" placeholder="请选择展览状态" clearable>
            <el-option v-for="item in exhibitionHeaderStore.exhibitionStatus" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item class="search-buttons">
          <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
          <el-button @click="resetForm" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="action-container">
      <el-button type="success" @click="addExhibitionStore.setIsOpen(true)">
        <el-icon>
          <Plus />
        </el-icon>添加展览
      </el-button>
      <el-button type="info" @click="exhibitionHeaderStore.exportData" :icon="Download">导出数据</el-button>
    </div>
  </div>
</template>

<style scoped>
.exhibition-header {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
}

.header-controls {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 1;
}

.toggle-search-btn {
  padding: 4px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #f5f7fa;
  transition: all 0.3s;
}

.toggle-search-btn:hover {
  background-color: #ecf5ff;
  color: #409EFF;
}

.search-container {
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.search-form .el-form-item {
  margin-bottom: 16px;
  margin-right: 16px;
}

.search-form .el-input,
.search-form .el-select,
.search-form .el-date-picker {
  width: 220px;
}

.search-buttons {
  margin-right: auto;
}

.action-container {
  display: flex;
  justify-content: flex-start;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .search-form {
    flex-direction: column;
  }

  .search-form .el-form-item {
    width: 100%;
    margin-right: 0;
  }

  .search-form .el-input,
  .search-form .el-select,
  .search-form .el-date-picker {
    width: 100%;
  }

  .search-buttons {
    margin-left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .action-container {
    flex-direction: column;
    gap: 10px;
  }

  .action-container .el-button {
    width: 100%;
  }
}
</style>